<template>
    <div class="keyBoard" v-if="isShow">
         <div class="finish">
              <a @touchstart="finishKey">完成</a>
         </div>
         <div class="enterKey">
              <ul>
                  <li v-for="(item, index) in currentVal" :key="index">
                       <div :class="{btn : isColor === items, isDisable : isKeyClick(index)}" @touchstart.stop="slideEvent(items)" @touchend.stop="slideLeave()" v-for="(items) in item" :key="items">
                            {{ items }}
                       </div>
                  </li>
              </ul>
              <div class="province" v-show="isKey === 0" :class="{btn : isColor === '省份'}" @touchstart.stop="slideEvent('省份')" @touchend.stop="slideLeave()">省份</div>
              <div class="province" v-show="isKey === 1" :class="{btn : isColor === 'ABC'}" @touchstart.stop="slideEvent('ABC')" @touchend.stop="slideLeave()">ABC</div>
              <div class="cancel" :class="{btn : isColor === '删除'}" @touchstart.stop="slideEvent('删除')" @touchend.stop="slideLeave()"></div>
         </div>
    </div>
</template>
<script>
export default {
  props:["isCarPhone"],
	data () {
		return {
			letterKey: [
			  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
			  ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
			  ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
			  ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
			],
			provinceKey: [
			  ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],
			  ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],
			  ['川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新'],
			  ['藏', '使', '领', '警', '学', '港', '澳']
			],
			currentVal: [],
			isColor: null,
			nowVal: '',
			isShow: false,
			isKey: 0 // 0 = 字母 letterKey 1 = 省份 = provinceKey
		}
	},
	methods : {
		// 判断是否拥有点击事件
		isKeyClick (num) {
		  const term = [this.isCarPhone === 0 && num === 0, this.isCarPhone === 1 && num !== 0]
		  const index = JSON.parse(JSON.stringify(this.isCarPhone))
		  return term[index]
		},
		// 切换省份数字
		isKeyFun () {
		  this.currentVal = this.isKey === 0 ? this.letterKey : this.provinceKey
		},
		slideEvent (str) {
			this.isColor = str
		},
		slideLeave () {
			if (this.isColor === '省份' || this.isColor === 'ABC') {
				this.isKey = this.isKey ? 0 : 1
				this.isColor = ''
				this.isKeyFun()
			}
			this.nowVal += this.isColor
			if (this.isColor === '删除') {
				this.nowVal = ''
				this.$emit('changephone', this.isColor, 'del')
				return false
			}
			this.$emit('changephone', this.isColor)
			this.isColor = null
		},
		// 显示隐藏
		finishKey () {
		  this.isShow = false
		},
		// 显示隐藏
		showKey (data) {
      this.isKey = data;
      this.isKeyFun()
		  this.isShow = true
		}
	}
}
</script>
<style lang="scss" scoped>
.keyBoard{
    position : fixed;
    bottom: 0px;
    left: 0px;
    height: 5rem;
    z-index: 999;
    width: 100%;
    background: #cfd5dc;
    .finish{
        text-align: right;
        padding-right: 0.2rem;
        color: #0085F5;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.3rem;
        background: #efefef;
    }
    .enterKey{
        height: 4.4rem;
        font-size: 0.35rem;
        margin-top: 0.1rem;
        position: relative;
        li {
            height: 0.8rem;
            width: 100%;
            text-align: center;
            margin-top: 0.2rem;
            float: left;
            div{
                display: inline-block;
                width: 0.6rem;
                height: 0.8rem;
                line-height: 0.8rem;
                text-align: center;
                background: #fff;
                margin: 0 0.06rem;
                border-radius: 0.05rem;
                box-shadow: 0.01rem 0.01rem 0.02rem #9999;
            }
            .btn {
                background: rgb(204, 204, 204);
            }
        }
        .province{
            width: 0.65rem;
            height: 0.8rem;
            text-align: center;
            line-height: 0.8rem;
            background: #adb5bd;
            border-radius: 0.05rem;
            box-shadow: 0.01rem 0.01rem 0.02rem #888;
            position: absolute;
            font-size: 0.28rem;
            bottom: 0.4rem;
            left: 0.2rem;
            font-weight: bold;
        }
        .province.btn, .cancel.btn{
            background-color: rgb(163, 163, 163);
        }
        .cancel{
            width: 0.65rem;
            height: 0.8rem;
            text-align: center;
            line-height: 0.8rem;
            background:url('../../assets/images/delete.png') no-repeat 50% 60%;
            background-size: 80% 70%;
            background-color: #adb5bd;
            border-radius: 0.05rem;
            box-shadow: 0.01rem 0.01rem 0.02rem #888;
            position: absolute;
            font-size: 0.28rem;
            bottom: 0.4rem;
            right: 0.22rem;
            font-weight: bold;
        }
    }
}
</style>
